<template>
    <!-- 值太多超出时，显示tooltip -->
    <el-tooltip 
        :placement="props.placement" 
        :content="props.showText" 
        trigger="click"
        :disabled="!isTextOverflow"  v-if="props.showText"
    >
        <span class="textTip" ref="textSpanRef">{{ props.showText }}</span>
    </el-tooltip>
</template>
  
<script setup lang="ts">

const props = defineProps<{
    showText: string;
    placement: string
}>();


const textSpanRef = ref();
const isTextOverflow = ref(false);

const checkOverflow = () => {
  const spanEl = textSpanRef.value;
  if (spanEl) {
    isTextOverflow.value = spanEl.scrollWidth > spanEl.clientWidth;
  }
};
onMounted(() => {
    checkOverflow();
    window.addEventListener('resize', checkOverflow);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', checkOverflow);
});

watch(() => props.showText, () => {
  setTimeout(checkOverflow, 0); // 延迟确保 DOM 更新
});
</script>
